<!-- TreeSelector.vue -->
<script setup lang="ts">
import { computed } from 'vue'
import TreeItem from './TreeItem.vue'

function filterCheckedNodes(nodes) {
  return nodes
    .map((node) => {
      // Recursively filter the children.
      const filteredChildren = node.children ? filterCheckedNodes(node.children) : []

      // Only keep the node if it is checked or has any checked children.
      if (node.checked || filteredChildren.length) {
        return {
          ...node,
          children: filteredChildren
        }
      }

      return null
    })
    .filter((node) => node !== null)
}
const emit = defineEmits(['changePortStatus'])
const props = defineProps({
  allPort: { type: Array },
  taskPort:{type:Array},
  activeTab: { type: String }
})
const getPortList=computed(()=>{
  return activeTab=='first'?props.taskPort:props.allPort

})
const checkedList = computed(() => {
  return filterCheckedNodes(props.allPort)
})


const handleCheckboxChange = (item) => {
  // console.log(item, '更新状态')
  // 更新子节点的状态
  updateChildCheckboxes(item, item.checked)
  // 更新父节点的状态
  updateParentCheckboxes(props.allPort)
  // 把修改后的数据传给父组件
  emit('changePortStatus', props.allPort)
}

const updateChildCheckboxes = (item, checked) => {
  if (item.children) {
    item.children.forEach((child) => {
      child.checked = checked
      updateChildCheckboxes(child, checked)
    })
  }
}

const updateParentCheckboxes = (items) => {
  items.forEach((item) => {
    if (item.children) {
      const allChecked = item.children.every((child) => child.checked)
      const someChecked = item.children.some((child) => child.checked)

      item.checked = allChecked
      item.indeterminate = someChecked && !allChecked

      updateParentCheckboxes(item.children)
    }
  })
}

const toggleChildren = (item) => {
  console.log(item, 'toggleChildren')
  item.open = !item.open
}
</script>

<template>
  <div class="tree-selector">
    <template v-if="activeTab == 'second'">
      <div
        v-for="item in allPort"
        :key="item.id"
        class="tree-item"
        :data-level="0"
        :class="{ isOpen: item.open, isClose: !item.open }"
      >
        <div class="item-content flex items-center cursor-pointer justify-between">
          <div class="flex items-center">
            <el-checkbox
              @change="handleCheckboxChange(item)"
              :disabled="activeTab == 'second' ? false : true"
              v-model="item.checked"
              :label="item.name"
              :id="item.id"
              size="large"
            />

            <span v-if="item.status" class="status">{{ item.status }}</span>
          </div>

          <Icon
            class="top_icon"
            icon="svg-icon:arrowb"
            :size="13"
            v-if="item.children && !item.open"
            @click="toggleChildren(item)"
          />
          <Icon
            class="top_icon"
            icon="svg-icon:arrowt"
            :size="13"
            v-if="item.children && item.open"
            @click="toggleChildren(item)"
          />
        </div>
        <div
          class="children"
          v-if="item.children"
          :style="{ display: item.open ? 'block' : 'none' }"
        >
          <TreeItem
            v-for="child in item.children"
            :key="child.id"
            :item="child"
            :level="1"
            @change="handleCheckboxChange"
          />
        </div>
      </div>
    </template>
    <template v-else>
      <template v-for="item in allPort" :key="item.id">
        <div
          v-if="item.children.find((checkItem) => checkItem.checked)"
          class="tree-item"
          :data-level="0"
          :class="{ isOpen: item.open, isClose: !item.open }"
        >
          <div class="item-content flex items-center cursor-pointer justify-between">
            <div class="flex items-center">
              <el-checkbox
                @change="handleCheckboxChange(item)"
                v-model="item.checked"
                :label="item.name"
                :id="item.id"
                size="large"
              />
              <span v-if="item.status" class="status">{{ item.status }}</span>
            </div>

            <Icon
              class="top_icon"
              icon="svg-icon:arrowb"
              :size="13"
              v-if="item.children && !item.open"
              @click="toggleChildren(item)"
            />
            <Icon
              class="top_icon"
              icon="svg-icon:arrowt"
              :size="13"
              v-if="item.children && item.open"
              @click="toggleChildren(item)"
            />
          </div>
          <div
            class="children"
            v-if="item.children"
            :style="{ display: item.open ? 'block' : 'none' }"
          >
            <template v-for="child in item.children" :key="child.id">
              <TreeItem
                v-if="child.checked"
                :item="child"
                :level="1"
                @change="handleCheckboxChange"
              />
            </template>
          </div>
        </div>
      </template>
    </template>
  </div>
</template>

<style lang="less" scoped>
.tree-selector {
  font-family: Arial, sans-serif;
  color: white;
  // border: 1px solid #0c6eba;
}
.isOpen {
  background: rgba(57, 109, 230, 0.24);
  border: 1px solid #0c6eba;
}
.isClose {
  background: rgba(57, 109, 230, 0.55);
  border: 1px solid #0c6eba;
}
.tree-item {
  position: relative;
  padding: 10px;
  .item-content {
    display: flex;
    align-items: center;
    .top_icon {
      margin-left: 16px;
    }

    > label {
      font-weight: bold;
    }
  }

  .status {
    background-color: #3b82f6;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 0.8em;
    margin-left: 5px;
  }

  // .custom-checkbox {
  //   width: 16px;
  //   height: 16px;
  //   border: 1px solid #6b7280;
  //   background-color: transparent;
  //   display: inline-block;
  //   margin-right: 5px;
  //   position: relative;
  //   cursor: pointer;
  //   background-color: pink;

  //   &::after {
  //     content: '';
  //     width: 10px;
  //     height: 10px;
  //     background-color: #3b82f6;
  //     background-color: yellow;
  //     position: absolute;
  //     top: 50%;
  //     left: 50%;
  //     transform: translate(-50%, -50%) scale(0);
  //     transition: transform 0.2s;
  //   }
  // }
  .custom-checkbox::after {
    content: '';
    width: 10px;
    height: 10px;
    background-color: #3b82f6;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.2s;
  }
  .custom-checkbox.checked::after {
    transform: translate(-50%, -50%) scale(1);
  }
  input[type='checkbox'] {
    display: none;

    &:checked + .custom-checkbox::after {
      transform: translate(-50%, -50%) scale(1);
    }
  }

  .children {
    padding-left: 20px;
    margin-top: 5px;

    &::before {
      content: '';
      position: absolute;
      left: 8px;
      top: 24px;
      bottom: 0;
      width: 1px;
      border-left: 1px dashed #6b7280;
    }

    .tree-item::before {
      content: '';
      position: absolute;
      left: -12px;
      top: 20px;
      width: 12px;
      height: 1px;
      border-bottom: 1px dashed #6b7280;
    }
  }

  .toggle {
    cursor: pointer;
    margin-left: 5px;
    font-size: 12px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #6b7280;
    border-radius: 3px;
  }
}
</style>
